<template>
	<x-popup v-model="show" @hide="close">
		<view class="pb-safe-area" v-if="payTypeList.length > 0">
			<view class="flex flex-center grid-gap-4">
				<view class="flex-1 text-center p-4 h9 font-weight-600">请选择支付方式</view>
			</view>
			<view class="flex flex-center">
				<x-money type="danger-light-3" weight="bold" size="1" :money="price" :abbreviation="false">
					<template #prefix>
						<text class="h10 text-danger-light-3">￥</text>
					</template>
				</x-money>
			</view>
			<view class="px-6 py-10 grid-gap-4 overflow-y-auto flex flex-column">
				<view class="flex flex-center grid-gap-2 bg-white p-4" v-if="payTypeList.includes('money')"
					@tap="selectedOption = 'money'">
					<image src="@/static/icons/pay/balance.png" style="width:60rpx;height:60rpx;"></image>
					<view class="flex-1">
						<text class="h9 font-weight-600">余额支付</text>
						<text class="text-placeholder h9">（余额：¥{{ USERINFO?.money }}）</text>
					</view>
					<uni-icons size="20" type="checkbox-filled" v-if="selectedOption === 'money'"
						color="var(--xl-primary)" />
					<uni-icons size="20" type="circle" v-else color="var(--xl-primary)" />
				</view>
				<view class="flex flex-center grid-gap-2 bg-white p-4" v-if="payTypeList.includes('wxpay')"
					@tap="selectedOption = 'wxpay'">
					<image src="@/static/icons/pay/wxpay.png" style="width:60rpx;height:60rpx;"></image>
					<view class="flex-1">
						<text class="h9 font-weight-600">微信支付</text>
					</view>
					<uni-icons size="20" type="checkbox-filled" v-if="selectedOption === 'wxpay'"
						color="var(--xl-primary)" />
					<uni-icons size="20" type="circle" v-else color="var(--xl-primary)" />
				</view>
				<!-- #ifdef H5 -->
				<view class="flex flex-center grid-gap-2 bg-white p-4" v-if="payTypeList.includes('alipay')"
					@tap="selectedOption = 'alipay'">
					<image src="@/static/icons/pay/alipay.png" style="width:60rpx;height:60rpx;"></image>
					<view class="flex-1">
						<text class="h9 font-weight-600">支付宝</text>
					</view>
					<uni-icons size="20" type="checkbox-filled" v-if="selectedOption === 'alipay'"
						color="var(--xl-primary)" />
					<uni-icons size="20" type="circle" v-else color="var(--xl-primary)" />
				</view>
				<view class="flex flex-center grid-gap-2 bg-white p-4" v-if="payTypeList.includes('epay')"
					@tap="selectedOption = 'epay'">
					<image src="@/static/icons/pay/epay.png" style="width:60rpx;height:60rpx;"></image>
					<view class="flex-1">
						<text class="h9 font-weight-600">易支付</text>
					</view>
					<uni-icons size="20" type="checkbox-filled" v-if="selectedOption === 'epay'"
						color="var(--xl-primary)" />
					<uni-icons size="20" type="circle" v-else color="var(--xl-primary)" />
				</view>
				<!-- #endif -->
			</view>
			<view class="flex flex-center p-6">
				<button class="flex-1 btn-primary btn-round" @click="submit()">确认支付</button>
			</view>
		</view>
		<view class="flex flex-center py-10" v-else>
			<x-empty type="order" text="暂无可用支付方式"></x-empty>
		</view>
	</x-popup>
</template>

<script setup lang="ts">
import { ref, watch, defineProps, onMounted } from 'vue';
import { useWebConfigStore, useUserStore, useRefs } from "@/stores";
import { $helper, useStorage } from "@/utils";
const WebConfigStore = useWebConfigStore();
const { WEBCONFIG } = useRefs(WebConfigStore);
const UserStore = useUserStore();
const { USERINFO } = useRefs(UserStore);
const props = withDefaults(defineProps<{
	show: boolean
	ordersType: String
	price?: String | Number
}>(), {
	show: false,
	ordersType: '',
	price: 0
});
const show = ref(props.show);
const payTypeList = ref([]);
const selectedOption = ref('');
const emit = defineEmits(['confirm', 'update:show'])
const initPayType = () => {
	if (WEBCONFIG.value.money_state && WEBCONFIG.value.money_orders_type.includes(props.ordersType)) {
		payTypeList.value.push('money')
	}
	// #ifdef H5 || APP
	if (WEBCONFIG.value.wxpay_state) {
		payTypeList.value.push('wxpay')
		selectedOption.value = 'wxpay'
	}
	if (WEBCONFIG.value.alipay_state) {
		payTypeList.value.push('alipay')
		if (!selectedOption.value) {
			selectedOption.value = 'alipay'
		}
	}
	if (WEBCONFIG.value.epay_state) {
		payTypeList.value.push('epay')
		if (!selectedOption.value) {
			selectedOption.value = 'epay'
		}
	}
	// #endif
	// #ifdef MP-WEIXIN
	if (WEBCONFIG.value.wxpay_state) {
		payTypeList.value.push('wxpay')
		selectedOption.value = 'wxpay'
	}
	// #endif
}
const submit = () => {
	useStorage().set('payType', selectedOption.value)
	emit('confirm', selectedOption.value)
}
const close = () => {
	emit('confirm')
}

watch(() => show.value, (val: boolean) => {
	emit('update:show', val);
})
watch(() => props.show, (val: boolean) => {
	show.value = val;
})
onMounted(() => {
	initPayType();
	const pay_type = useStorage().get('payType');
	if (pay_type) {
		selectedOption.value = pay_type;
	}
})
</script>
<style lang="scss" scoped>
.w-100px {
	width: 100px;
}
</style>